<template>
	<view class="">
		<!-- 顶部图片 -->
		<view class="top-img">
			<image class="fengrui-img" src="../../static/my/bg15.svg" mode="aspectFill"></image>
		</view>

		<view class="sel-over-w">
			<!-- 头像 -->
			<view class="self-w">
				<view class="self-user-img">
					<image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
				</view>
				<view class="self-user-info">
					<view class="self-user-info-name">
						小程序用户
					</view>
					<view class="self-user-info-describe">
						{{wxSet.share_title}}
					</view>
				</view>
			</view>

			<!-- me-svg -->
			<view class="me-svg">
				<button class="me-sbg-btn" hover-class="fengrui-li-hover" @tap="allTag()">
					<view class="Vajra-list-img">
						<image class="fengrui-img" src="../../static/my/star.svg" mode="aspectFill"></image>
					</view>
					<view class="Vajra-list-font">
						知识星球
					</view>
				</button>
				<button class="me-sbg-btn" hover-class="fengrui-li-hover" v-if="wxSet.public_follow != ''" @tap="popupSever()">
					<view class="Vajra-list-img">
						<image class="fengrui-img" src="../../static/my/poster.svg" mode="aspectFill"></image>
					</view>
					<view class="Vajra-list-font">
						关注官方
					</view>
				</button>
				<button class="me-sbg-btn" hover-class="fengrui-li-hover" open-type="contact" send-message-title="个人中心"
					send-message-path="pages/me/me" show-message-card="true">
					<view class="Vajra-list-img">
						<image class="fengrui-img" src="../../static/my/customer.svg" mode="aspectFill"></image>
					</view>
					<view class="Vajra-list-font">
						咨询客服
					</view>
				</button>
			</view>
		</view>

		<!-- 判断微信流量主 -->
		<!-- #ifdef MP-WEIXIN -->
		<block v-if="wxSet != ''">
			<view class="" style="margin: 30rpx 30rpx;">
				<ad :unit-id="wxSet.wx_video" ad-type="video" ad-theme="white"></ad>
			</view>
		</block>
		<!-- #endif -->

		<!-- 功能列表 -->
		<view class="metergasis">
			<view class="metergasis-li" hover-class="fengrui-li-hover" @tap="clearTap()">
				<view class="metergasis-li-img">
					<image class="fengrui-img" src="../../static/my/cache.svg" mode="aspectFill"></image>
				</view>
				<view class="metergasis-li-h">
					清除缓存
				</view>
				<view class="metergasis-li-rgth">
					<image class="fengrui-img" src="../../static/my/more.svg" mode=""></image>
				</view>
			</view>

			<view class="metergasis-li" hover-class="fengrui-li-hover" @tap="abouTap()">
				<view class="metergasis-li-img">
					<image class="fengrui-img" src="../../static/my/about.svg" mode="aspectFill"></image>
				</view>
				<view class="metergasis-li-h">
					关于程序
				</view>
				<view class="metergasis-li-rgth">
					<image class="fengrui-img" src="../../static/my/more.svg" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 占位符号 -->
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	// 获取应用实例
	const app = getApp()
	import * as API from "../../utils/api";
	export default {
		data() {
			return {
				wxSet: [], //基本配置
			}
		},
		onLoad() {
			if (app.globalData.wxSet == '') {
				//（解决异步）
				app.on('wxSet', this.changeToken.bind(this));
			} else {
				this.wxSet = app.globalData.wxSet;
			}

			// 微信分享盆友圈
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif
		},

		// 分享好友配置
		onShareAppMessage(res) {
			var that = this;
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: that.wxSet.share_title,
				imageUrl: that.wxSet.share_title_url,
				path: 'pages/me/me'
			}
		},

		methods: {
			//（解决异步）
			changeToken() {
				this.wxSet = app.globalData.wxSet;
			},


			// 清除缓存
			clearTap() {
				uni.clearStorageSync();
				uni.clearStorage();
				uni.showToast({
					title: '清理成功',
					duration: 2000
				})
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			// 标题页跳转
			allTag() {
				uni.navigateTo({
					url: '/pages/tags/tags',
				})
			},

			abouTap() {
				uni.navigateTo({
					url: '/pages/about/about'
				})
			},
			
			popupSever(){
				uni.navigateTo({
					url: '/pages/follow/follow'
				})
			},
		}

	}
</script>

<style>
	/* 顶部图片 */
	.top-img {
		width: 100%;
		height: 340rpx;
		overflow: hidden;
	}

	
	.feng-img {
		height: 100%;
		margin: auto;
		display: block;
	}

	.titel-h {
		font-size: 38rpx;
		margin: 30rpx 0rpx;
		position: relative;
	}

	.titel-h:after {
		content: '';
		position: absolute;
		bottom: -14rpx;
		left: 0px;
		width: 96rpx;
		height: 8rpx;
		border-radius: 200rpx;
		background: linear-gradient(90deg, rgba(55, 110, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);
	}

	/* 功能列表 */
	.metergasis-li-rgth {
		width: 50rpx;
		height: 50rpx;
		overflow: hidden;
		flex-shrink: 0;
		position: absolute;
		right: 0rpx;
		top: 50%;
		transform: translate(0%, -50%);
	}

	.metergasis-li-h {
		grid-row: 1;
		margin-left: 30rpx;
		font-size: 30rpx;
	}

	.metergasis-li-img {
		height: 52rpx;
		width: 52rpx;
		border-radius: 100rpx;
		flex-shrink: 0;
	}

	.metergasis-li {
		padding: 24rpx 32rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
	}

	.metergasis {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin: 48rpx 0rpx;
		padding: 2rpx;
		margin: 30rpx;
	}

	/* me-svg */
	.Vajra-list-font {
		color: #807C7C;
		font-size: 20rpx;
	}

	.Vajra-list-img {
		height: 60rpx;
		width: 60rpx;
		overflow: hidden;
		margin: auto;
	}

	.me-sbg-btn {
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		width: 25%;
		padding: 14rpx 0rpx;
	}

	.me-svg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	/* 流量主广告或者图片 */
	.me-ads {
		border-radius: 18rpx;
		margin: 48rpx 0rpx;
		overflow: hidden;
		margin: 30rpx;
	}

	/* 头像 */
	.self-user-updata {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 48rpx;
	}

	.self-user-info-describe {
		color: #807C7C;
		font-size: 24rpx;
		margin-top: 18rpx;
	}

	.self-user-info-name {
		font-size: 48rpx;
		flex-grow: 1;
	}

	.self-user-info {
		margin: 0rpx 24rpx;
	}

	.self-user-img {
		height: 120rpx;
		width: 120rpx;
		border-radius: 100rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.self-w {
		display: flex;
		justify-content: flex-start;
		padding: 48rpx 26rpx;
		align-items: flex-end;
		overflow: hidden;
		position: relative;
	}

	.sel-over-w {
		overflow: hidden;
		background-color: #FFFFFF;
		margin: 0rpx 28rpx;
		border-radius: 16rpx;
	}

	/* 全局 */
	.center {
		margin: 48rpx;
	}

	page {
		background-color: #f7f7f7;
		overflow-x: hidden;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	button {
		padding-left: 0rpx;
		padding-right: 0rpx;
		background-color: #FFFFFF;
	}

	.button-hover {
		background-color: #FFFFFF !important;
	}

	button::after {
		border: 0px solid rgba(0, 0, 0, .2);

	}

	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {
		page {
			background: #161616;
		}

		.sel-over-w,
		.self-w,
		.metergasis,
		.me-svg,
		.me-sbg-btn,
		button {
			background-color: #202020;
		}
	}
</style>